<template>
  <view style="width: 100%;height: 100%;">
	 <DomVideoPlayer
	    ref="domVideoPlayer"
		class="domVideoPlayer"
	    object-fit='cover'
	    :controls="controls"
	    :autoplay="autoplay"
		:style="videoStyle"
	    :loop="loop"
		:muted="muted"
	    :src="videoSrc"
	    :is-loading="isLoading"
	  />
	  <!-- <video :src="videoSrc" :style="videoStyle"></video> -->
  </view>
</template>

<script>
import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
export default {
  props: {
    srckey: {
      type: String,
      required: true
    },
	controls: {
	  type: Boolean,
	  default:false
	},
	autoplay: {
	  type: Boolean,
	  default:true
	},
	muted: {
	  type: Boolean,
	  default:true
	},
	loop: {
	  type: Boolean,
	  default:true
	},
	videoStyle: {
	  type: String,
	  default: 'width: 100%;height: 100%'
	},
  },
  data() {
    return {
	  randomNum: Math.floor(Math.random() * 100000000),
      videoSrc: '',
	  isLoading:true,
	  fileTpye:'video',
	  uploadType:'stars',
	  isload:false
    };
  },
  mounted() {
	  this.createIntersectionObserver();
    // this.loadImage();
  },
  methods: {
    async loadImage() {
	   this.isload = true
	   try {
		 const cachedMedia = await mediaCache.loadMedia(this.srckey, this.uploadType, this.fileTpye);
		 if(this.isNetworkUrl(cachedMedia)){
			 this.videoSrc = cachedMedia
		 }else{
			 // 使用plus.io的resolveLocalFileSystemURL方法获取文件的绝对路径
			 plus.io.resolveLocalFileSystemURL(cachedMedia, (entry) => {
				 this.videoSrc = entry.toLocalURL()
			 }, function(e) {});
		 }
	   } catch (error) {}
    },
	isNetworkUrl(url) {
	    const pattern = /^(http|https|ftp):\/\//i;
	    return pattern.test(url);
	},
	createIntersectionObserver() {
	  this.$nextTick(() => {
		  this.$nextTick(() => {
			const domVideoPlayer = this.$refs.domVideoPlayer
			this.observer = uni.createIntersectionObserver(this);
			this.observer.relativeToViewport().observe('.domVideoPlayer', (res) => {
			  if (res.intersectionRatio > 0) {
				  if(!this.isload)this.loadImage()
				 
				  // console.log('在');
				  // 视频元素在视口中，播放视频
				  domVideoPlayer && domVideoPlayer.play()
				// 视频元素在视口中，播放视频
				// this.$refs.videoPlayer.play();
			  } else {
				  // 视频元素不在视口中，暂停视频
				  domVideoPlayer && domVideoPlayer.pause()
				  // console.log('不在');
				// 视频元素不在视口中，暂停视频
				// this.$refs.videoPlayer.pause();
			  }
			});
		  });
	  });
	}
  }
};
</script>

<style scoped lang="scss">
</style>
